<template>
  <div class="list-common">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-input
          v-model="search"
          placeholder="请输入检索内容"
          @keyup.enter="handleSearch"
          input-style="padding-right:30px"
        ></el-input>
      </el-col>
      <el-col :span="6" class="operation-container">
        <el-button type="primary" @click="handleSearch">检索</el-button>
        <el-button type="info" @click="handleClear">清空</el-button>
        <el-button type="primary" @click="createNewForm">新建</el-button>
      </el-col>
    </el-row>
    <div class="star-table-container">
      <el-table
        :data="menuList"
        :stripe="stripe"
        :max-height="listHeight"
      >
        <el-table-column prop="bt" label="标题" />
        <el-table-column prop="publish" label="状态" align="center" width="100" >
          <template #default="scope">
              <el-tag
                :type="scope.row.publish === 1 ? 'success' : 'info'"
                disable-transitions
              >{{ scope.row.publish === 1 ? '已发布' : '未发布' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="year" align="center" label="调查年份" width="100" />
        <el-table-column prop="createDate" align="center" label="创建时间" width="200">
          <template #default="scope">
            {{ dateFormate(scope.row.createDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="op" align="center" label="操作" width="350">
          <template #default="scope">
            <el-button type="primary" @click="handleQuestionManager(scope)" >操作</el-button>
            <el-popconfirm :title="showContent('删除', scope)" @confirm="handleRemove(scope)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm v-if="scope.row.publish !== 1" :title="showContent('发布', scope)" @confirm="handlePublish(scope,'1')">
              <template #reference>
                <el-button type="primary">发布</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm v-else :title="showContent('取消发布', scope)" @confirm="handlePublish(scope,'-1')">
              <template #reference>
                <el-button type="primary">取消发布</el-button>
              </template>
            </el-popconfirm>
            <el-button v-if="scope.row.publish === 1" type="primary" @click="handlePreview">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="star-table-pagination">
      <el-pagination
        background
        :total="listTotal"
        :layout="pageOperate"
        :default-page-size="size"
        :page-sizes="listPageSizes"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        v-model:current-page="currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { stripe, size, pageOperate, listPageSizes } from '@/config/list'
import { getQuestionConfigList, removeQuestionConfig, publishQuestion } from '@/api/business/questions/questionconfig/QuestionConfig'

import '@/style/list.less'

const router = useRouter()
const route = useRoute()

moment.locale('zh-cn')

const search = ref('')
const menuList = ref([])
const listTotal = ref(0)
const pageSize = ref(size)
const currentPage = ref(1)

const dateFormate = computed(() => (date) => {
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
})

const handleSearch = () => {
  currentPage.value = 1
  loadListData()
}

const handleClear = () => {
  currentPage.value = 1
  search.value = ''
  loadListData()
}

// 修改
const handleQuestionManager = (scope) => {
  router.push({
    name: 'questionConfigForm',
    query: {
      id: scope.row.id,
      tabName: '编辑问卷'
    }
  })
}

const handleRemove = (scope) => {
  if (scope.row.publish === 1) {
    ElMessage.error('当前问卷处于发布状态，请取消发布后删除！')
    return
  }

  removeQuestionConfig(scope.row.id).then(() => {
    ElMessage.success('删除成功!')
    reloadData()
  }).catch(error => {
    ElMessage.error(error.message)
  })
}

const handlePublish = ({ col, row }, type) => {
  publishQuestion(row.id, type).then(() => {
    ElMessage.success('操作成功')
    reloadData()
  }).catch(error => {
    ElMessage.error(error.message || '发布失败！')
  })
}

const createNewForm = () => {
  router.push({
    name: 'questionConfigForm',
    query: {
      tabName: '新建问卷',
      fromPath: route.path
    }
  })
}

const handlePreview = () => {
  const href = router.resolve({
    name: 'publishForm'
  })
  window.open(href.href, '_blank')
}

const reloadData = () => {
  loadListData()
}

const showContent = computed(() => (op, scope) => {
  return `是否要${op}${scope.row.bt}？`
})

const loadListData = () => {
  getQuestionConfigList({
    current: currentPage.value,
    pageSize: pageSize.value,
    search: search.value
  }).then(data => {
    const { total, list } = data
    listTotal.value = total
    menuList.value = list
  })
}

const handleSizeChange = () => {
  loadListData()
}

const handleCurrentChange = () => {
  loadListData()
}

const listHeight = computed(() => {
  return 'calc(100vh - 285px)'
})

onMounted(() => {
  loadListData()
})
</script>
